<template>
  <div class="login-account">
    <el-form ref="loginAccountRef" :model="loginAccountForm" :rules="loginAccountRules">
      <el-form-item required prop="name" label="账号：">
        <el-input v-model="loginAccountForm.name" type="text" autocomplete="on"></el-input>
      </el-form-item>
      <el-form-item required prop="password" label="密码：">
        <el-input v-model="loginAccountForm.password" type="password" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// 引入vuex辅助函数
import {useStore} from 'vuex'
// import { defineComponent } from "@vue/runtime-core"
import { ElForm } from 'element-plus'
import { reactive, defineExpose, ref,onMounted } from 'vue'
// 导入我们封装的本地存储类
import localCache from '../../../utils/cache'
// 导入我们的账号校验配置
import loginAccountRules from '../config/account-config'
const store = useStore()
const loginAccountRef = ref<InstanceType<typeof ElForm>>()

const loginAccountForm: LoginAccountFromType = reactive({
  name: localCache.getCache('user').name,
  password: localCache.getCache('user').password
})

// 处理登录校验和是否保存密码
const loginAction = (isKeepPassword:boolean) => {
  console.log('acount正在登录')
  loginAccountRef.value?.validate((valid) => {
    // 表单校验
    if (valid) {
      // 判断是否需要保存密码
      if(isKeepPassword) {
        localCache.setCache('user',loginAccountForm)
      }
      // 开始真正登录验证
      // 1.请求我们login的store模块的action请求
      store.dispatch('login/accountLoginAction',loginAccountForm)
    }
  })
}
// 暴露的属性，通过在父组件中通过模板引用的方式可访问到该属性
defineExpose({
  loginAction,
  loginAccountForm
})


// export default defineComponent({
//   setup(){
//     interface LoginAccountFromType {
//       name: string
//       password: string
//     }
//     const loginAccountForm: LoginAccountFromType = reactive({
//       name: '',
//       password: ''
//     })
//     const loginAction = () => {
//       console.log("acount正在登录")
//     }
//     return {
//       loginAccountForm,
//       loginAction,
//       loginAccountRules
//     }
//   }
// })
</script>

<style scoped lang="less"></style>
